<template>
    <div class="direct">
        <div class="demo-input-suffix" style="margin-left:5px;margin-right:15px;">
            <el-checkbox v-model="checkbox_isShowDustbinPicture" @change="changeMapType">显示卫星地图</el-checkbox>
        </div>
        <div class="demo-input-suffix" style="margin-right:15px;">
            <el-checkbox v-model="checkbox_isShowDustbinTitle" @change="changeMarkerLabel">显示垃圾桶名称标签</el-checkbox>
        </div>
        <!-- <div class="demo-input-suffix">指导员负责区域：</div>
        <div class="demo-input-suffix" style="margin-left:5px;margin-right:15px;">
            <el-cascader
                :options="dataVillageList"
                :show-all-levels="false"
                @expand-change="select_village_action"
                @change="select_village_action"
            ></el-cascader>
        </div>-->
        <div class="allmap" id="allmap"></div>
        <div class="tree">
            <el-tree node-key="id" :default-expanded-keys="[1,2]" :data="data_tree" :props="defaultProps" @node-click="handleNodeClick"></el-tree>
        </div>
        <div class="rightinformation">
            <p for>
                <span id="span1"></span>
            </p>
            <p for>
                <span id="span2"></span>
            </p>
            <p for>
                <span id="span3"></span>
            </p>
            <p for>
                <span id="span4"></span>
            </p>
            <p for>
                <span id="span5"></span>
            </p>
            <hr />
            <p for>
                <span id="span6"></span>
            </p>
            <p for>
                <span id="span7"></span>
            </p>
            <p for>
                <span id="span8"></span>
            </p>
        </div>
        <!--    <el-form
            title="详细信息"
            id="VillageDetail"
            v-model="defaultProps"
            :visible.sync="VillageDetail"
            :key='index'
            class="dialogwhole"
        >
         {{item.sumBuilding}}
        {{item.sumHome}}
        {{item.sumPerson}} 
             <div>总楼数：112</div>
            <div>总户数：250</div>
            <div>实住人数：600</div>
            <hr />
            <div>管理单位：天塔街道</div>
            <div>联系人：王雪</div>
            <div>联系电话：15022033221</div>
        </el-form>-->

        <!-- 右键列表菜单 -->
        <div
            class="row_box"
            v-if="MouseEvent.isShow"
            :style="`left: ${MouseEvent.left}px; top: ${MouseEvent.top}px;`"
        >
            <span @click="goVideo">视频</span>
        </div>
    </div>
</template>
<script>

import markerIcon_rubbishReal from '../../../assets/img/RubbishBoxRealScene.png'
import markerIcon_rubbish from '../../../assets/img/Rubbish.png'
import markerIcon_rubbishVideo from '../../../assets/img/RubbishVideo.png'
export default {
  data () {
    return {
      data_tree: [],
      // dataVillageList: [],
      VillageDetail: false,
      defaultProps: {
        children: 'children',
        longitude: 'longitude',
        latitude: 'latitude',
        label: 'label'
      },
      dataRubbishBoxsList: [],
      checkbox_isShowDustbinTitle: '',
      checkbox_isShowDustbinPicture: '',
      map: '',
      map_scopeCircle: '',
      map_markers: [],
      MouseEvent: {
        top: 0,
        left: 0,
        isShow: false
      },
    }
  },
  mounted () {
    this.loadDate_Tree();
    this.initMap();
    this.loadAllBoxs();

    // this.loadAllVillage()
  },
  methods: {
    // async loadAllVillage () {
    //   var url = 'http://111.160.78.62:5575/GarbagePointsTYApi/BasicData/GetGroupsApi?ClientNo='+localStorage.getItem('clentno');
    //   const { data } = await this.$axios.get(url)
    //   this.dataVillageList = data.filter(item => {
    //     return item
    //   })
    // },
    // loadDate_Tree(){
    //   this.$axios({
    //     url: this.$url+ '/GetGroupDataApi?StreetNo=34',
    //     method: 'get'
    //   }).then(res=>{
    //     console.log(res.data)
    //   })
    // },
    async loadDate_Tree () {
      var url = this.$url + '/GetGroupDataApi?ClientNo=' + localStorage.getItem("clentno") + '&Level=' + localStorage.getItem("USERLEVEL")
      // var url = 'http://111.160.78.62:5575/GarbagePointsTYApi/BasicData/GetGroupDataApi?ClientNo=' + localStorage.getItem("clentno") + '&Level=' + localStorage.getItem("USERLEVEL")
      console.log(url)
      const { data } = await this.$axios.get(url)
      const dataz = [{id:1,"label":"仓山区","unit":"盖山镇","contacts":null,"telephone":null,"sumPerson":"69242","sumBuilding":"174","sumHome":"20439","sumArea":"12","sumDis":"34","longitude":"119.3410491943","latitude":"26.0313549042","children":[]}]
      data[0].id = 2;
      // dataz[0].children.push(data)
      // console.log(dataz[0].children)
      dataz.forEach((val) => {
        val.children = data
      })
      this.data_tree = dataz.filter(item => {
        console.log(item)
        return item
      })
    },
    async loadAllBoxs () {
      var url = this.$url + '/GetRubbishPointsApi?ClientNo=' + localStorage.getItem("clentno") + '&Level=' + localStorage.getItem("USERLEVEL")
      // var url = 'http://111.160.78.62:5575/GarbagePointsTYApi/BasicData/GetRubbishPointsApi?ClientNo=' + localStorage.getItem("clentno") + '&Level=' + localStorage.getItem("USERLEVEL")
      console.log('loadAllBoxs=' + url)
      const { data } = await this.$axios.get(url)
      data.forEach(item => {
        var point = new BMap.Point(item.LONGITUDE, item.LATITUDE);
        // this.map.centerAndZoom(point, 12)
        var myIcon = new BMap.Icon(markerIcon_rubbish, new BMap.Size(40, 40));
        // var myIcon = new BMap.Icon("https://www.easyicon.net/api/resizeApi.php?id=1284995&size=32", new BMap.Size(32, 35));
        if (item.VideoAble == 1) {
          myIcon = new BMap.Icon(markerIcon_rubbishVideo, new BMap.Size(40, 40));
        }
        var marker = new BMap.Marker(point, { icon: myIcon });
        var label = new BMap.Label(item.NAME, { offset: new BMap.Size(20, -10) });
        marker.setLabel(label);

        const _self = this;
        // 右击显示菜单
        // 这一步是为了阻止右击时系统默认的弹出框
        marker.addEventListener("oncontextmenu", function (e) {
          e.preventDefault();
        });

        if (item.VideoAble == 1) {
          // 右击事件
          marker.addEventListener("onmouseup", function (oEvent) {
            if (!oEvent) oEvent = window.event;
            if (oEvent.domEvent.button == 2) {
              window.event.returnValue = false
              _self.MouseEvent.left = oEvent.clientX
              _self.MouseEvent.top = oEvent.clientY - 26 * 2
              _self.MouseEvent.isShow = true
            }
          });
        }
        marker.disableMassClear()
        this.addInfoWindow(marker, item);
        this.map.addOverlay(marker);
      })
      // this.dataRubbishBoxsList = data.filter(item => {
      //   this.addMarker(item)
      //   return item
      // })
    },
    addInfoWindow (marker, item) {
      var sContent = '<iframe src="infowindow.html?RubbishPointID=' + item.ID + '" width=400 height=220 frameborder=0 scrolling=no></iframe>'
      var height = 200 + item.boxs.legend * 20
      item.boxs.forEach(item => {
        // {"BOX_ID":18,"RUBBISH_ID":180,"BOX_NAME":"5","BOX_TYPE":"3","SIZE":"500","PHOTO":"","HOTEL_ID":null}
        // {"BOX_ID":19,"RUBBISH_ID":181,"BOX_NAME":"6","BOX_TYPE":"3","SIZE":"600","PHOTO":"","HOTEL_ID":null}
        var stringType = item.BOX_TYPE
        switch (stringType) {
          case '1':
            stringType = '厨余垃圾'
            break;
          case '2':
            stringType = '有害垃圾'
            break;
          case '3':
            stringType = '其他垃圾'
            break;
          case '4':
            stringType = '可回收垃圾'
            break;
          case '5':
            stringType = '玻璃'
            break;
          case '6':
            stringType = '废纸'
            break;
          case '7':
            stringType = '金属'
            break;
          case '8':
            stringType = '塑料瓶'
            break;
          default:
            stringType = '未知'
            break;
        }
        // text-indent:1em css text左侧空格
        sContent += "<p style='margin-top:5px;font-size:16px;'>" + stringType + "桶：" + item.SIZE + "L" + "</p>"
      })
      var infoWindow = new BMap.InfoWindow(sContent, { width: 400, height: height });  // 创建信息窗口对象
      marker.addEventListener("click", function () {
        this.openInfoWindow(infoWindow);
      });
    },
    handleNodeClick (data) {
      console.log(data);
      var type = 1;
      this.setScopeCircle(data)
      document.getElementById('span1').innerText = "总人数：" + data.sumPerson;
      document.getElementById('span2').innerText = "总户数：" + data.sumHome;
      document.getElementById('span3').innerText = "总楼数：" + data.sumBuilding;
      if (data.sumDis) {
        document.getElementById('span4').innerText = "小区数量：" + data.sumDis;
        type = 2;
      } else {
        document.getElementById('span4').innerText = "";
      }
      if (data.sumArea) {
        document.getElementById('span5').innerText = "社区数量：" + data.sumArea;
        type = 3;
      } else {
        document.getElementById('span5').innerText = "";
      }
      if (data.unit) {
        document.getElementById('span6').innerText = "管理单位：" + data.unit;
      } else {
        document.getElementById('span6').innerText = "";
      }
      if (data.contacts) {
        document.getElementById('span7').innerText = "联系人：" + data.contacts;
      } else {
        document.getElementById('span7').innerText = "";
      }
      if (data.telephone) {
        document.getElementById('span8').innerText = "联系人电话：" + data.telephone;
      } else {
        document.getElementById('span8').innerText = "";
      }
    },
    initMap () {
      this.map = new BMap.Map('allmap')
      // var City = '太原'
      // var point = new BMap.Point(112.593887,37.866154) // 创建点坐标
      // var City = '北京'
      // var point = new BMap.Point(116.404, 39.915) // 创建点坐标
      var City = '福州'
      var point = new BMap.Point(119.31864, 26.07052) // 创建点坐标
      // var City = '天津'
      // var point = new BMap.Point(117.216853,39.142488) // 创建点坐标
      this.map.setCurrentCity(City)
      this.map.centerAndZoom(point, 13) // 初始化地图，设置中心点坐标和地图级别
      this.map.enableScrollWheelZoom(true) //开启鼠标滚轮缩放
    },
    changeMapType (val) {
      if (val) {
        this.map.setMapType(BMAP_HYBRID_MAP);
      } else {
        this.map.setMapType(BMAP_NORMAL_MAP);
      }
    },
    changeMarkerLabel (val) {
      for (var i = 0; i < this.map_markers.length; i++) {
        var marker = this.map_markers[i]
        if (val) {
          marker.getLabel().setStyle({ display: 'block' })
        } else {
          marker.getLabel().setStyle({ display: 'none' })
        }
      }
    },
    setScopeCircle (row) {
      var point = new BMap.Point(row.longitude, row.latitude)
      if (this.map_scopeCircle == '') {
        this.map_scopeCircle = new BMap.Circle(point, 120, { strokeColor: "blue", strokeWeight: 2, strokeOpacity: 0.5 }); //创建圆
        this.map.addOverlay(this.map_scopeCircle);
      } else {
        this.map_scopeCircle.setCenter(point)
      }
      this.map.centerAndZoom(point, 18)
      // this.map.removeoverlay(this.map_scopeCircle)
    },
    removeCircle (row) {
      if (this.map_scopeCircle != '') {
        this.map.removeOverlay(this.map_scopeCircle)
        this.map_scopeCircle = ''
      }
    },
    addMarker (data) {
      var point = new BMap.Point(data.LONGITUDE, data.LATITUDE);

      // this.translateGPS (point)
      var myIcon = new BMap.Icon(markerIcon_rubbish, new BMap.Size(32, 35));
      //var myIcon = new BMap.Icon(require("../src/assets/img/img.jpg"), new BMap.Size(32,35));
      var marker = new BMap.Marker(point, { icon: myIcon });
      var label = new BMap.Label(data.ID, { offset: new BMap.Size(20, -10) });
      marker.setLabel(label);
      this.map_markers.push(marker);
      this.addInfoWindow(marker);
      this.map.addOverlay(marker);
    },
    // 跳转至视频页面
    goVideo () {
      this.MouseEvent.isShow = false;
      window.open('https://www.baidu.com', '_blank');
      // window.open('https://112.49.125.209:1443/portal/cas/loginPage?service=https://112.49.125.209:1443/portal', '_blank');
    },
    translateGPS (point) {
      var convertor = new BMap.Convertor();
      var pointArr = [];
      pointArr.push(point);
      var _this = this;
      convertor.translate(pointArr, 1, 5, function (data) {
        if (data.status === 0) {
          var marker = new BMap.Marker(data.points[0]);
          _this.map.addOverlay(marker);
          // this.map.addOverlay(marker);
          // bm.addOverlay(marker);
          // var label = new BMap.Label("转换后的百度坐标（正确）", { offset: new BMap.Size(20, -10) });
          // marker.setLabel(label); //添加百度label
          // bm.setCenter(data.points[0]);
        }
      })
    },
    // addInfoWindow (marker) {
    //   var sContent = '<iframe src="../../infowindow.html" width=400 height=220 frameborder=0 scrolling=no></iframe>'
    //     // var sContent = "<h4 style='margin:0 0 2px 0;padding:0.2em 0'>体院北育贤里7号楼1门</h4>"
    //     //   + "<div><img id='imgDemo' style='float: left;width:90px;height=100%;' src='https://taojin-his.cdn.bcebos.com/03087bf40ad162d9ac75ef6d1edfa9ec8a13cd2c.jpg' alt='logo'>"
    //     + "<p style='margin:0;line-height:1.5;font-size:17px;text-indent:1em'>厨余垃圾桶：5.2kg</p>"
    //     + "<p style='margin:0;line-height:1.5;font-size:17px;text-indent:1em'>可回收圾桶：3.4kg</p>"
    //     + "<p style='margin:0;line-height:1.5;font-size:17px;text-indent:1em'>其他垃圾桶：已满溢</p>"
    //     + "<p style='margin:0;line-height:1.5;font-size:17px;text-indent:1em'>有害垃圾桶：1.1kg</p>"
    //     + "<br>"
    //     + "<p style='margin:0;line-height:1.5;font-size:17px;text-indent:1em'>指导员：张旭</p>";
    //   // + "</div>";
    //   var infoWindow = new BMap.InfoWindow(sContent, { width: 400, height: 400 });  // 创建信息窗口对象
    //   marker.addEventListener("click", function () {
    //     this.openInfoWindow(infoWindow);
    //   });
    // }
  },
}
</script>
<style scoped>
hr {
    margin-top: 20px;
    margin-bottom: 15px;
}
.allmap {
    width: 100%;
    height: 96%;
    border: 1px solid darkgrey;
    position: absolute;
    left: 0;
    top: 45px;
    right: 0;
    bottom: 0;
    margin: auto;
}
.direct,
body {
    width: 100%;
    height: 100%;
    position: relative;
}
.tree {
    position: absolute;
    left: 10px;
    top: 40px;
    z-index: 555;
    width: 280px;
    height: 80%;
    opacity: 0.8;
    background: #fff;
}

.tree p {
    color: #60b6a1;
    font-size: 120%;
    margin-left: 10px;
    font-weight: 600;
}
.el-tree {
    color: #000;
    font-weight: 600;
    height: 100%;
    overflow-y: scroll;
    background: #fff;
    box-shadow: -5px -5px 15px -5px rgba(0, 0, 0, 0.3);
}
.rightinformation {
    z-index: 555;
    position: absolute;
    right: 10px;
    bottom: 10px;
    width: 280px;
    background: #fff;
    /* opacity: 0.6; */
    color: #333;
    padding: 10px 20px;
    font-size: 16px;
    box-shadow: -3px 0 15px 3px rgba(0, 0, 0, 0.3);
}
.rightinformation > p {
    width: 100%;
    margin-bottom: 3px;
}
hr {
    margin: 10px 0;
}
.demo-input-suffix {
    float: left;
    font-size: 15px;
    height: 32px;
    line-height: 32px;
}
.el-carousel__item h3 {
    color: #475669;
    font-size: 18px;
    opacity: 0.75;
    line-height: 300px;
    margin: 0;
}

.el-carousel__item:nth-child(2n) {
    background-color: #99a9bf;
}

.el-carousel__item:nth-child(2n + 1) {
    background-color: #d3dce6;
}
.dialogwhole {
    position: absolute;
    right: 10px;
    bottom: 10px;
    width: 280px;
    height: 200px;
    font-size: 15px;
    opacity: 0.8;
    background: #fff;
    padding: 15px;
}
.row_box {
    width: 120px;
    color: #666;
    background-color: #f3f3f3;
    border: 1px solid #ccc;
    position: fixed;
}
.row_box span {
    display: block;
    text-align: center;
    line-height: 26px;
    cursor: default;
}
.row_box span:hover {
    color: #fff;
    background-color: #409eff;
}
</style>